<template>
    <div class="empty-container" :class="{'inline':inline}">
      <i class="icon"></i>
      <span class="info">
        <slot>暂无信息</slot>
      </span>
    </div>
</template>

<script>
    export default {
        props:{
          inline:{
            type:Boolean,
            default: true
          }
        },
        name: 'empty',
        data ()
        {
            return {
            }
        },
        mounted()
        {
        },
        methods: {
        }
    }
</script>

<style lang="scss" scoped>
  .empty-container
  {
    display: block;
    text-align: center;
    margin: 100px auto 0 -40px;

    > .icon {
      display: inline-block;
      width: 140px;
      height: 140px;
      background: url("../../assets/icon/icon_无待办.png") top center no-repeat;
      background-size: contain;
      margin-left: 20px;
    }
    > .info {
      display: block;
      font-size: 14px;
      color: #475669;
      letter-spacing: 0;
      margin-top: 30px;
    }

    &.inline{
      margin: 30px auto 30px -40px;

      > .icon
      {
        display: inline-block;
        width: 80px;
        height: 80px;
        vertical-align: middle;
        background: url("../../assets/icon/icon_no data.png") center center no-repeat;
        background-size: contain;
      }

      > .info {
        display: inline-block;
        margin: 0 0 0 10px;
        vertical-align: middle;
        color: #8391a5;
      }
    }
  }
</style>
